<template>
  <div class="line-comment f-sb-fs" v-if="row">
    <div id="user" class="f-c-c-c">
      <el-avatar :size="50" :src="row.avatar"></el-avatar>
      <b>{{ row.nickname }}</b>
    </div>
    <div id="info">
      <div id="head" class="f-sb-c">
        <div class="f-fs-c">
          <span>{{ row.baseName }}</span
          ><span>{{ row.ram + "+" + row.rom }}G</span
          ><span>{{ row.color }}</span>
        </div>
        <el-tooltip id="stars" effect="dark" content="满意度" placement="top">
          <div>
            <i
              class="el-icon-star-on"
              v-for="(item, ind) in row.stars"
              :key="ind"
            ></i>
            <i
              class="el-icon-star-off"
              v-for="(item, ind) in 5 - row.stars"
              :key="'key' + ind"
            ></i>
          </div>
        </el-tooltip>
      </div>
      <div id="body">
        {{ row.content }}
      </div>
      <div id="foot" class="f-sb-c">
        <div>
          <span>{{ dateAgo(row.time) }}</span>
          <span>浏览{{ row.readAmount }}次</span>
          <!-- <span>评论{{row.commentAmount}}条</span> -->
        </div>
        <div>
          <el-tooltip effect="dark" content="去评论" placement="top">
            <i class="el-icon-chat-dot-round" @click="goComment"></i>
          </el-tooltip>
          <el-tooltip effect="dark" content="展开评论" placement="top">
            <i class="el-icon-arrow-down" @click="unfoldComment"></i>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div id="show" class="f-sb-c">
      <el-popover trigger="hover" v-for="(item, ind) in imgs" :key="ind">
        <img style="width: 250px" :src="item" />
        <img
          class="small-img"
          :class="item ? '' : 'no-img'"
          slot="reference"
          :src="item"
        />
      </el-popover>
    </div>
  </div>
</template>
<script>
import { getDateDiffByText } from "../../../public/js/utility.js";
export default {
  name: "lineComment",
  props: ["row"],
  data() {
    return {};
  },
  computed: {
    imgs() {
      return this.row.imgs.split(";");
    },
    dateAgo() {
      return function (time) {
        return getDateDiffByText(time);
      };
    },
  },
  methods: {
    goComment() {
      this.$alert("暂未开通评论功能！");
    },
    unfoldComment() {
      this.$alert("暂未开通展开评论及其回复功能！");
    },
  },
};
</script>
<style lang="scss" scoped>
.line-comment {
  color: $color-text-secondary;
  padding: 10px 0;
  margin-top: 5px;
  padding: 10px 20px 10px 0;
  border-bottom: 1px solid $border-color-light;
  background: $background-color-base;
}
#user {
  width: 100px;
  text-align: center;
  img {
    height: 60px;
    width: 60px;
  }
  b {
    font-size: 14px;
  }
}
#info {
  font-size: 12px;
  width: 550px;
  margin: 0 25px 0 0;
  span:not(:last-child) {
    margin-right: 20px;
  }
  #head {
    #stars {
      color: $theme-color;
      align-self: flex-end;
      .el-icon-star-on {
        font-size: 16px;
      }
      .el-icon-star-off {
        font-size: 14px;
      }
    }
  }
  #body {
    color: #000000;
    font-size: 16px;
    line-height: 22px;
    height: 44px;
    padding: 5px 0;
    margin: 5px 0;
    border-top: 1px solid $border-color-lighter;
    border-bottom: 1px solid $border-color-lighter;
  }
  #foot {
    i {
      cursor: pointer;
      font-size: 16px;
      font-weight: 900;
      margin-left: 10px;
      &:hover {
        color: $theme-color;
      }
    }
  }
}
#show {
  width: 500px;
  .el-popover,
  .small-img {
    height: 100px;
    width: 100px;
  }
  // .small-img {
  //   width: 90px;
  //   height: 90px;
  // }
  .no-img {
    box-sizing: border-box;
    border-radius: $border-radius-base;
    border: 1px dashed $border-color-extra-light;
  }
}
</style>